<template>
  <a-modal
    :visible="visible"
    @cancel="onCancel"
    @close="onClose"
    :title="modalConfig.title"
    :mask-closable="false"
    unmount-on-close
    width="45%"
  >
    <page-form :model="form" layout="vertical" div="true" :rules="rules" ref="formRef">
      <page-form-row :gutter="24">
        <page-form-item field="carIdList" label="请选择车辆" required size="1">
          <fast-transfer style="width: 100%" v-model="form.carIdList" :selectedList="selectedList" :data-source="roleData" />
        </page-form-item>
      </page-form-row>
      <div class="border p-5">
        <a-alert class="mb-5 items-start">
          <template #icon>
            <icon-exclamation-circle />
          </template>
          <div> 请注意，今日设置完成后，第二天生效。 </div>
        </a-alert>
        <page-form-row :gutter="24">
          <page-form-item label="是否分期核算">
            <a-radio-group v-model="form.ifOpen">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </page-form-item>
        </page-form-row>
        <page-form-row v-if="form.ifOpen == 1" :gutter="24">
          <page-form-item field="receivableNum" label="期数" required>
            <a-input-number hide-button allow-clear v-model="form.receivableNum" :min="1" :max="100" :precision="0" placeholder="请输入" />
          </page-form-item>
          <page-form-item field="firstDate" label="第一期付款日" required>
            <a-date-picker v-model="form.firstDate" />
          </page-form-item>
        </page-form-row>
      </div>
    </page-form>

    <template #footer>
      <a-button type="secondary" @click="onCancel">取消</a-button>
      <a-button type="primary" @click="onOk">确定</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { getCarList, updatePurchaseTax } from '@/api/dashboard/vehicleAccounting'

  import { ref } from 'vue'

  const visible = ref(false)
  const formRef = ref()
  const form = ref<any>({
    carIdList: [],
    ifOpen: 1,
  })
  const selectedList = ref<any>([])
  const roleData = ref<any>([])
  const modalConfig = ref<any>({
    title: '设置购置税分期',
    feeItemEnums: [],
  })
  const emits = defineEmits(['ok', 'close', 'cancel'])
  const rules = {
    carIdList: [{ required: true, message: '请选择' }],
    receivableNum: [{ required: true, message: '请输入' }],
    firstDate: [{ required: true, message: '请选择' }],
  }

  const onCancel = () => {
    visible.value = false
    emits('cancel')
  }

  const onClose = () => {
    formRef.value.resetFields()
    selectedList.value = []
    form.value.ifOpen = 1
    emits('close')
  }

  const onOk = () => {
    formRef.value.validate((error: any) => {
      if (!error) {
        updatePurchaseTax({
          carIdList: form.value.carIdList,
          ifOpen: form.value.ifOpen,
          receivableNum: form.value.receivableNum,
          firstDate: form.value.firstDate,
        }).then(() => {
          visible.value = false
          emits('ok')
        })
      }
    })
  }

  const getAllCarList = () => {
    getCarList({}).then((res) => {
      roleData.value = res.result.map((item: any) => {
        return {
          label: item.licenseNo,
          value: item.id,
        }
      })
    })
  }

  const open = () => {
    visible.value = true
    getAllCarList()
  }

  defineExpose({
    open,
  })
</script>

<style scoped lang="less"></style>
